<template>
    <ContentWrap class="right">
        <div id="map"></div>
    </ContentWrap>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader"

let locationArr = ref<number[]>([118.182547, 24.488449])
const mapInstance = ref<any>(null);

// 初始化地图
const initMapInstance = (AMap) => {
    // 生成地图的参数，具体可详见高德api文档
    const option: { [key: string]: any } = {};
    mapInstance.value = new AMap.Map("map", {
        option,
        viewMode: "3D",    //是否为3D地图模式
        zoom: 16,          //初始化地图级别
        center: locationArr.value
    });

};

// 在loadMap方法的then里面调用初始化地图
const loadAMap = () => {
    AMapLoader.load({
        key: "dbf568ee28ba003bd7917581b5e97c61",
        version: "2.0",
        plugins: [
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.Geolocation',
            'AMap.PlaceSearch',
            'AMap.AutoComplete',
            'AMap.Geocoder',
            'AMap.CitySearch'
        ],// 你所使用到的插件
    }).then((AMap) => {
        initMapInstance(AMap);
        const marker = new AMap.Marker({
            // icon: icon,
            // content,
            // position: new AMap.LngLat(116.397428, 39.90923), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            position: locationArr.value, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: "",
            offset: new AMap.Pixel(-10, -30)
        });
        // 将创建的点标记添加到已有的地图实例：
        mapInstance.value.add(marker);
    });
};
onMounted(() => {
    loadAMap();
})
</script>

<style lang="scss" scoped>
.right {
    border-radius: 20px;
    background-color: #f9faff;

    #map {
        margin: auto;
        width: 1060px;
        height: 800px;
        border-radius: 20px;
    }
}

::v-deep .amap-logo {
    opacity: 0 !important;
}

::v-deep .amap-copyright {
    opacity: 0 !important;
}
</style>